<script>
import {ElNotification} from "element-plus";
import {loadAdminManager, removeAdminManager} from "@/api/admin/manager.js";

export default {
  data(){
    return {
      list: [],
    }
  },
  methods: {
    async initManagerData(){
      let data = await loadAdminManager()
      this.list = data;
    },
    async deleteManager(row){
      await removeAdminManager(row.admin_id);
      ElNotification.success({
        title:`“${row.admin_username}”删除成功`,
      })
      this.initManagerData()
    },
  },
  created() {
    this.initManagerData()
  }
}
</script>
<template>
    <el-card>
        <template #header>管理员账号管理</template>
        <div class="nav-bar">
            <div>
                <el-button size="small" type="success">
                    <template #icon>
                        <el-icon><EpPlus /></el-icon>
                    </template>
                    <span>添加</span>
                </el-button>
            </div>
        </div>
        <el-table border stripe size="small" :data="list">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column label="管理员编号" prop="admin_id"></el-table-column>
            <el-table-column label="管理员名称" prop="admin_username"></el-table-column>
            <el-table-column label="角色" #default="{row}">
              <el-tag  size="small" effect="dark">{{row.role_name}}</el-tag>
            </el-table-column>
            <el-table-column label="权限数量" #default="{row}">
              <el-tag type="danger" size="small" effect="dark">{{row.rights_count}}</el-tag>
            </el-table-column>
            <el-table-column label="操作" width="120" #default="{row}">
                <el-button type="primary" link>编辑</el-button>
              <el-popconfirm :title="`是否删除管理员“${row.admin_username}”`" @confirm="deleteManager(row)">删除
                <template #reference>
                  <el-button type="danger" link>删除</el-button>
                </template>
              </el-popconfirm>
            </el-table-column>
        </el-table>
    </el-card>

</template>

<style scoped>
.nav-bar{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 14px;
}
</style>
